import { createRouter, createWebHashHistory} from "vue-router";
// import Home from '../views/Home.vue'
// import About from '../views/About.vue'
const Home = () => import('../views/Home.vue');
const About = () => import('../views/About.vue');
const Product = () => import('../views/Product.vue');
const NotFound = () => import('../views/404.vue');
const VuexPage = () => import('../views/Vuex.vue');
//引入用户中心
const userCenter =()=> import("../views/user-center/index.vue")
const userProfile =()=> import("../views/user-center/Profile.vue")
const userSettings =()=> import("../views/user-center/Settings.vue")

const ElementTest = ()=>import('../views/ElementTest.vue')

const CompositionApiPage = () => import('../views/composition-api/Index.vue');

const Register =()=>import('../views/Register.vue')

const AccountList = () => import("../views/AccountList.vue")

const routes = [
    {
        path:'/',
        redirect: '/home'
    },
    {
        path:'/element',
        name: '/element',
        component: ElementTest
    },
    {
        path:'/home',
        name:'home',
        component:Home
    },
    {
        path:'/composition-api',
        name:'compositionApi',
        component:CompositionApiPage
    },
    {
        path:'/product/:id',
        name:'product',
        component:Product
    },
    {
        path: '/account-list',
        name: 'accountList',
        component: AccountList
    },
    {
        path:'/about',
        name:'about',
        component:About
    },
    {
        path:'/vuex',
        name:'vuex',
        component:VuexPage
    },
    {
        path:'/register',
        name:'register',
        component:Register
    },
    {
        path:'/user',
        name:'user',
        component:userCenter,
        redirect: '/user/profile',
        children:[
            {
                path:'profile',
                name:'profile',
                component: userProfile
            },
            {
                path:'settings',
                name:'settings',
                component: userSettings
            }
        ]
    },
    {
        path:'/:pathMatch(.*)*',
        name:'notFound',
        component:NotFound
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});
export default router